<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../../css/app.css">
		<link rel="stylesheet" type="text/css" href="../../../css/tabBar.css">
		<link rel="stylesheet" type="text/css" href="../comm/shop_comm.css" />
		<link rel="stylesheet" type="text/css" href="../comm/xy-pop.css" />
		<link rel="stylesheet" type="text/css" href="./shop_index_discount.css">
		<title>限时秒杀</title>
	</head>

	<body>
		<div class="header navigationBar">
			<div class="wrapper">
				<span id="btn-back" class="header-btn left-btn backtrack"></span>
				<span class="title">限时秒杀</span>
			</div>
		</div>
		<div style="height: 3rem;"></div>
		<div class="container">
			<div class="top-nav-bar">
				<div :class="activeIndex == 0 ? 'active' : ''" @click="changeNav" data-index="0">
					<span>正在疯抢</span>
				</div>
				<div :class="activeIndex == 1 ? 'active' : ''" @click="changeNav" data-index="1">
					<span>即将开抢</span>
				</div>
				<div :class="activeIndex == 2 ? 'active' : ''" @click="changeNav" data-index="2">
					<span>明日预告</span>
				</div>
			</div>
			<div class="discount-list">
				<div>
					<div class="list-title">
						<img src="../../../image/shop/shop_index_3.png" alt="">
						<span v-html="timeTxt" v-if="is_future == 0"></span>
						<span v-html="timeTxt" v-if="is_future == 1"></span>
						<span v-html="timeTxt" v-if="is_future == 2"></span>
					</div>
					<p>
						<i v-html="is_future == 0 ? '距结束' : '距开始'" ></i>
						<span v-html="(timeList[0] || 0)+''+(timeList[1] || 0)"></span> <i>:</i>
						<span v-html="(timeList[2] || 0)+''+(timeList[3] || 0)"></span> <i>:</i>
						<span v-html="(timeList[4] || 0)+''+(timeList[5] || 0)"></span>
					</p>
				</div>
				<ul>
					<li v-for="item in list" :data-goodsid="item.goods_id" @click="atOnceBuy" :data-group="item.group_booking">
						<div class="list-img-box">
							<img :src="item.cover+'?x-oss-process=image/resize,m_lfit,w_960'" />
						</div>
						<div class="list-msg-box">
							<p class="goods-title" v-html="item.goods_name"></p>
							<div class="line" v-if="is_future == 0">
								<div class="line-content">
									<div class="line-progress" :style="'width:'+Math.ceil(item.percent)+'%;'"></div>
									<span class="line-percent" v-html="Math.ceil(item.percent)+'%'"></span>
								</div>
								<span v-html="'已抢'+item.sale_count+'件'"></span>
							</div>
							<div class="left-over" v-if="is_future == 1" v-html="'限量5件，今日'+hourMinute+'开始'"></div>
							<div class="left-over" v-if="is_future == 2" v-html="'限量5件，明日'+hourMinute+'开始'"></div>
							<div class="price-and-btn">
								<div class="list-price">
									<span><i>¥</i><b v-html="item.kill_price || 0"></b></span>
									<span> <i>¥</i><b v-html="item.market_price || 0"></b></span>
								</div>
								<div class="list-btn" v-if="is_future == 0" @click="atOnceBuy" :data-goodsid="item.goods_id" :data-group="item.group_booking">
									<span>马上抢</span>
									<img src="../../../image/back-while.png" alt="">
								</div>
								<div class="list-btn" v-else="" @click="remindMeBuy" :data-goodsid="item.goods_id">
									<img src="../../../image/shop/clock.png" class="lsit-btn-clock" alt="">
									<span>提醒我</span>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script src="../../sea.js" data-main="../../main"></script>
	<script type="text/javascript" src="../../vue.js"></script>
	<script type="text/javascript" src="./shop_index_discount.js"></script>
</html>
